<template>
  <div class="coupon">
    <navBar :title="title"></navBar>
    <van-cell-group>
      <van-field v-model="cardNum" clearable placeholder="请输入礼品卡卡号">
        <img src="/img/45.png" alt slot="left-icon" class="left-icon" />
      </van-field>
      <van-field v-model="password" type="password" placeholder="请输入礼品卡密码">
        <img src="/img/55.png" alt slot="left-icon" class="left-icon" />
      </van-field>
    </van-cell-group>
    <van-button type="default" class="exchange" @click="handleSubmit">立即兑换</van-button>
  </div>
</template>

<script>
import navBar from "@/components/nav-bar";
import { Field, Cell, CellGroup, Button } from "vant";
import { mapActions } from "vuex";
Vue.use(Field)
  .use(Cell)
  .use(CellGroup)
  .use(Button);
export default {
  name: "coupon",
  data() {
    return {
      title: "卡券兑换",
      cardNum: "",
      password: ""
    };
  },
  components: {
    navBar
  },
  methods: {
    ...mapActions(["exChange"]),
    handleSubmit() {
      this.exChange({
        card_sn: this.cardNum,
        passwd: this.password
      }).then(res => {
        if (res.data.status == 1) {
          this.$router.push({ path: "/exchangeSuccess" });
        }
      }).catch(res=>{

      });
    }
  }
};
</script>

<style lang="less">
.coupon {
  padding-top: 130px;
  .left-icon {
    height: 26px;
    width: 26px;
    padding-right: 5px;
    vertical-align: middle;
  }
  .van-cell-group {
    padding: 0 20px;
    box-sizing: border-box;
  }
  .van-cell {
    line-height: 58px;
    height: 66px;
    border-bottom: 1px solid rgba(224, 224, 224, 1);
  }
  input::-webkit-input-placeholder {
    color: rgba(171, 171, 171, 1);
    font-size: 16px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: rgba(171, 171, 171, 1);
    font-size: 16px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: rgba(171, 171, 171, 1);
    font-size: 16px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: rgba(171, 171, 171, 1);
    font-size: 16px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
  }
  .exchange {
    position: absolute;
    top: 330px;
    left: 50%;
    transform: translateX(-50%);
  }
  .van-button--default {
    width: 333px;
    height: 41px;
    background: linear-gradient(
      90deg,
      rgba(1, 47, 64, 1) 0%,
      rgba(1, 47, 64, 1) 100%
    );
  }
  .van-button__text {
    width: 115px;
    height: 22px;
    font-size: 15px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 22px;
  }
}
</style>
